<template>
<div>
  <div class="dephead">

    <p-input-search
      class="hideName"
      v-model="userId"
      placeholder="请选择用户"
      readOnly
      @search="onSearchDepUser">
      <p-button slot="enterButton" :disabled="disabled">选择用户</p-button>
    </p-input-search>

    <p-input-search
      class="showName"
      v-model="showName"
      placeholder="请先选择用户"
      readOnly
      @search="onSearchDepUser">
      <p-button slot="enterButton" :disabled="disabled">选择用户</p-button>
    </p-input-search>

    <j-select-user-by-dep-modal
      ref="selectModal"
      :modal-width="modalWidth"
      :multi="multi"
      @ok="selectOK"
      :user-ids="value"
      @initComp="initComp"/>
  </div>
</div>
  
</template>

<script>
  import JSelectUserByDepModal from './modules/JSelectUserByDepModal'

  export default {
    name: 'JSelectUserByDep',
    components: { JSelectUserByDepModal },
    props: {
      modalWidth: {
        type: Number,
        default: 1250,
        required: false
      },
      value: {
        type: String,
        required: false
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      multi: {
        type: Boolean,
        default: true,
        required: false
      },
       user: {
        type: String,
        default: ''
      },
    },
    data () {
      return {
        userIds: '',
        userId: '',
        showName: '',
      }
    },
    mounted () {
      this.userIds = this.value
    },
    watch: {
      user:{
        handler(val){
          if(val){
            this.showName = val;
          }else{
            this.$nextTick(()=>{
             this.showName = this.userId
            })
          }
        },
        deep: true,
    　　immediate: true
      },
      value:{
        handler(val){
           if(val && val.indexOf('*') > 1){
            let jEtableVal = []
            jEtableVal = val.split('*')
            this.userId = jEtableVal[0]
            this.$emit("change",  jEtableVal[0])
            this.$nextTick(()=>{
              this.showName = jEtableVal[1]
            })
          }else{
            if(val){
              this.userIds = val
              this.userId = val
            }else{
              this.userId = ''
              this.showName = ''
            }
          }
        },
        deep: true,
      　immediate: true
      },
     
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    methods: {
     

      initComp (userId) {
        this.userId = userId
      },
      onSearchDepUser () {
        this.$refs.selectModal.showModal()
      },
      selectOK (rows, idstr) {
        const name = []
        rows.forEach((item, index) => {
          name.push(item.name)
        })
        if (!rows) {
          this.userId = ''
          this.userIds = ''
        } else {
          let temp = ''
          for (const item of rows) {
            temp += ',' + item.name
          }
          this.userId = idstr.toString()
          this.showName = name.toString()
          this.userIds = idstr.toString()
        }
        this.$emit('change', this.userIds)
        this.$emit('selectRow', rows);
      }
    }
  }
</script>

<style scoped>
  .dephead{
    position: relative !important ;
  }
  .hideName{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 3;
  }
   .showName{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 4;
  }
</style>
